<template>
  <div class="user-profile-page">
    <el-container>
      <el-header>
        <h1>个人中心</h1>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="24">
            <el-card class="user-info">
              <el-row>
                <el-col :span="8">
                  <el-avatar :size="100" :src="user.avatar"></el-avatar>
                </el-col>
                <el-col :span="16">
                  <h2>{{ user.name }}</h2>
                  <p>{{ user.email }}</p>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <h2>收藏的餐厅</h2>
            <el-row :gutter="20">
              <el-col :span="8" v-for="favorite in user.favorites" :key="favorite.name">
                <el-card class="favorite-restaurant">
                  <template #header>
                    <div class="clearfix">
                      <el-image :src="favorite.image" fit="cover" class="restaurant-image"></el-image>
                      <span>{{ favorite.name }}</span>
                      <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
                    </div>
                  </template>
                  <div class="text item">
                    <p>位置：{{ favorite.location }}</p>
                    <p>评分：{{ favorite.rating }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <h2>历史操作记录</h2>
            <el-timeline>
              <el-timeline-item
                v-for="record in user.history"
                :key="record.id"
                :timestamp="record.date">
                <el-card>
                  <h4>{{ record.action }}</h4>
                  <p>{{ record.description }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        name: 'Alice',
        email: 'alice@example.com',
        avatar: require('@/img/img.png'), // 请确保路径正确
        favorites: [
          { name: '家常菜馆', location: '安师大二食堂三楼10号窗口', rating: 4.7, image: require('@/img/img_1.png') },
          { name: '麻辣香锅', location: '安师大二食堂三楼11号窗口', rating: 4.5, image: require('@/img/img_2.png') },
          { name: '轻卡轻食', location: '安师大二食堂三楼12号窗口', rating: 4.0, image: require('@/img/img_4.png') }
        ],
        history: [
          { id: 1, action: '评论', description: '在“家常菜馆”发表了评论', date: '2024-11-30' },
          { id: 2, action: '收藏', description: '收藏了“麻辣香锅”', date: '2024-12-01' }
        ]
      }
    }
  }
}
</script>

<style scoped>
.user-profile-page {
  /* 设置背景色为白色 */
  background-color: #fff;
  height: 140vh;
  width: 100vw;
  overflow: auto;
  position: relative; /* 确保内容在其上 */
  background-size: cover; /* 图片会被缩放以完全覆盖背景区域，保持其宽高比 */
}

.user-profile-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./img/img.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* 设置半透明 */
  opacity: 0.5;
}

.user-info {
  padding: 20px;
  text-align: left;
}

.user-info h2 {
  margin: 0;
}

.user-info p {
  margin: 5px 0;
  color: #666;
}

.favorite-restaurant {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.restaurant-image {
  width: 100%;
  height: 150px;
  display: block;
  margin-bottom: 10px;
}

.text.item p {
  margin: 5px 0;
  font-size: 0.9em;
  color: #666;
}

</style>
